<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无hack无js全兼容text-overflow-ellipsis效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
.list ul { 
	font-size:12px;
	font-family:simsun;
	text-align:left;
	line-height:18px;
	width:11em;
	background:#fff;
}
.list li{
	height:18px;
	overflow:hidden;
	position:relative;
	padding-left:1em;
	background:url(ico.gif) no-repeat 3px 6px;
	}
.list a{
	display:block;
	padding-right:1em;
	background:url(pot.gif) right top no-repeat;
	position:relative;
	zoom:1;
	word-break:break-all;
	}
.list a span {
	position:absolute;
	right:0em;
	bottom:0;
	height:18px;
	width:1em;
	background:#fff;
	overflow:hidden;
}
</style>
</head>
<body>
<div class="list">
	<ul>
		<li><a href="#nogo">该标签中字符超过十个了<span></span></a></li>
		<li><a href="#nogo">只有六个汉字<span></span></a></li>
		<li><a href="#nogo">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了<span></span></a></li>
		<li><a href="#nogo">blueidea blueidea blueidea<span></span></a></li>
	</ul>
</div>
</body>
</html>
